<template>
  <div class="account_page">
    <content-page>
      <div class="header_back_page" @click="backPage">
        <van-icon name="arrow-left" />返回
      </div>
      <div class="account_warp1">
        <div class="account_num">0</div>
        <div class="account_header">
          <div class="account_header_desc">账户余额(冰币)</div>
          <div class="account_header_record">
            <span class="account_use_record" @click="checkUserRecord">消费记录</span>
            <span class="account_recharge_record" @click="checkRechargeRecord">充值记录</span>
          </div>
        </div>
      </div>
      <div class="account_warp2">
        <ul class="act_w2_ul">
          <li
            v-for="itemRecharge in rechargeList"
            :key="itemRecharge.id"
            :class="{rechargeActive: defaultIndex === itemRecharge.id}"
            class="act_w2_li"
            @click="selectRechargeMoney(itemRecharge.id,itemRecharge.money1)"
          >
            <div class="recharge_money">充 <span class="recharge_money_count">{{ itemRecharge.money1 }}</span>元</div>
            <div class="recharge_money_desc">{{ itemRecharge.money2 }}冰币</div>
          </li>
        </ul>
        <div class="input_recharge_money_warp">
          <van-field v-model="inputValueMoney" maxlength="6" type="number" placeholder="请输入充值金额" @input="inputRechargeMoney" />
        </div>
        <div class="recharge_warp"> <span>充值金额：</span> <span>{{ rechargeMoney }}元</span></div>
        <div class="make_sure_recharge">确认充值</div>
        <div class="recharge_agree">充值即代表同意 <span class="recharge_agree_page">《充值协议》</span> </div>
      </div>
      <div class="account_warp3">
        <div v-for="(itemDesc,indexDesc) in descList" :key="indexDesc" class="account_desc">
          <van-icon name="info-o" />{{ itemDesc.content }}</div>
      </div>
    </content-page>
  </div>
</template>

<script>
import contentPage from '../../components/content_page'
export default {
  name: 'Account',
  components: {
    contentPage,
  },
  data() {
    return {
      rechargeList: [
        { id: 0, money1: 10, money2: 10 },
        { id: 1, money1: 50, money2: 50 },
        { id: 2, money1: 80, money2: 80 },
        { id: 3, money1: 100, money2: 100 },
      ],
      defaultIndex: -1,
      descList: [
        { content: '虚拟商品购买后不可退换，1冰币=1元，冰币有效期1年，过期自动时效，消费时优先扣除距离过期时间最近的冰币。' },
        { content: '包年vip特权可在购买之后的一年里免费查询所有城市、行政区、片区、小区。' },
        { content: '终身版vip特权可在购买之后终身享受免费查询所有城市、行政区、片区、小区、学校数据。' },
      ],
      inputValueMoney: '',
      rechargeMoney: undefined,
    }
  },
  computed: {},
  create() {
  },
  mounted() {
  },
  methods: {
    inputRechargeMoney(value) {
      this.rechargeMoney = value
    },
    /** 选择充值类型 **/
    selectRechargeMoney(id, money) {
      this.defaultIndex = id
      this.rechargeMoney = money
      this.$toast('敬请期待')
    },
    checkUserRecord() {
      this.$toast('消费记录')
    },
    checkRechargeRecord() {
      this.$toast('充值记录')
    },
    /** 返回上一页 **/
    backPage() {
      this.$router.back(-1)
    },
  },
}
</script>

<style scoped lang="scss">
@import "../../assets/style/base";
  .account_page{
    .header_back_page{
      padding: pxTorem(15px) 0 pxTorem(15px) pxTorem(20px);
      font-size: pxTorem(32px);
      display: flex;
      align-items: center;
      background-color: #222c44;
      color: #ffffff;
      border-bottom: 1px solid #ffffff;
    }
    .account_warp1{
      height: pxTorem(240px);
      padding: pxTorem(40px) pxTorem(20px) pxTorem(20px) pxTorem(30px);
      background-color: #222c44;
      color: #ffffff;
      .account_num{
        font-size: pxTorem(60px);
        margin-left: pxTorem(20px);
      }
      .account_header{
        display: flex;
        color: #999999;
        justify-content: space-between;
        margin-top: pxTorem(40px);
        font-size: pxTorem(30px);
        .account_header_desc{}
        .account_header_record{
          .account_use_record{
            padding-right: pxTorem(20px);
            border-right: 1px solid #999999;
            margin-right: pxTorem(20px);
          }
          .account_recharge_record{}
        }
      }
    }
    .account_warp2{
      padding: pxTorem(0px) pxTorem(30px);
      .act_w2_ul{
        display: flex;
        padding: pxTorem(30px) pxTorem(40px) pxTorem(0px) pxTorem(40px);
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: pxTorem(20px);
        border-top: 1px solid #999999;
        .act_w2_li{
          width: pxTorem(280px);
          text-align: center;
          border: 1px solid #999999;
          padding: pxTorem(21px) 0;
          margin-bottom: pxTorem(40px);
          font-size: pxTorem(28px);
          border-radius: pxTorem(8px);
          position: relative;
          .recharge_money{
            .recharge_money_count{
              font-size: pxTorem(40px);
            }
          }
          .recharge_money_desc{
            color: #999999;
          }
          .rechargeMoneyDesc{
            color: #e98f36;
          }
        }
        .rechargeActive{
          background-color: #ffcc00;
        }
        .right_icon{
          position: absolute;
          top: 0;
          background-color: #e98f36;
          font-size: pxTorem(21px);
          padding: pxTorem(2px) pxTorem(6px);
          border-radius: pxTorem(6px);
          color: #ffffff;
        }

      }
      .input_recharge_money_warp {
        border-radius: pxTorem(4px);
        width: pxTorem(610px);
        margin: auto;
        border: 1px solid #999999;
        .input_recharge_money {
          border: none!important;
          outline: none!important;
          width: 100%;
          padding: pxTorem(4px) pxTorem(20px);
          font-size: pxTorem(32px);
        }
      }
      .recharge_warp{
        font-size: pxTorem(34px);
        padding: pxTorem(20px) pxTorem(36px);
        color: #e98f36;
      }
      .make_sure_recharge{
        width: pxTorem(650px);
        margin:pxTorem(20px) auto;
        height: pxTorem(80px);
        line-height: pxTorem(80px);
        text-align: center;
        font-size: pxTorem(34px);
        color: #ffffff;
        background-color: #e98f36;
        border-radius: pxTorem(8px);
      }
      .recharge_agree{
        width: pxTorem(400px);
        margin: pxTorem(10px) auto;
        font-size: pxTorem(28px);
        color: #666666;
        .recharge_agree_page{
          color: #999999;
        }
      }
    }
    .account_warp3{
      padding: pxTorem(0px) pxTorem(30px);
      .account_desc{
        font-size: pxTorem(30px);
        color: #666666;
        margin-bottom: pxTorem(30px);
      }
    }
  }
</style>
